@import "theme";
@import "../../src/scss/_mixin.scss";
h4 {
  font-size: $font14;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 10px;
  color: $base;
}

h3 {
  font-size: $font18;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 20px;
  color: $base;
}

h2 {
  font-size: $font24;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 20px;
  color: $base;
}

.p,
p {
  color: $grey;
  padding-bottom: 30px;
  font-size: $font14;
  line-height: $font24;
  code {
    display: block;
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
    background-color: $background;
    white-space: pre-wrap;
  }
}

.p:last-child,
p:last-child {
  padding-bottom: 10px;
}

h3 + .p > table {
  width: 100%;
  font-size: $font12;
  border: 1px solid $disabled;
  th,
  td {
    padding: 5px 10px;
    border: 1px solid $disabled;
  }
  th {
    background-color: $background;
    color: $base;
  }
}

.fade-enter-to {
  opacity: 0;
  &.fade-enter-active {
    opacity: 1;
  }
}

.fade-leave-to {
  opacity: 1;
  &.fade-leave-active {
    opacity: 0;
  }
}



.ma-code {
  color: $grey;
  border: 1px solid $disabled;
  margin-top: 20px;
  .ma-code-bar {
    padding: 5px 10px;
    text-align: right;
    cursor: pointer;
    .iconfont {
      &:before {
        margin-right: 5px;
      }
    }
  }
  .ma-code-more {
    background-color: $background;
    padding: 10px;
    code {
      padding: 0;
      white-space: pre-wrap;
      display: block;
    }
  }
}
